import grid from './control/Grid';
import ItemIcon from './ItemIcon';
import draggable from "vuedraggable"
const layout_item = {
    grid  //栅格布局
};

const displayControl = (_self, sortableItem, name, value) => {
    // 默认不显示
    let display = false;
    for (let i in sortableItem) {
        // 循环出sortableItem内被关联字段并且其状态为显示并且其值与用户预设被关联字段值匹配
        // 不匹配,进行下一次判断
        if (sortableItem[i].obj.name != name || !sortableItem[i].obj.visibility) {
            continue;
        }
        // checkbox的value为数组, 判断是否存在  非数组直接比对字符串
        if ((Array.isArray(sortableItem[i].obj.value) && sortableItem[i].obj.value.indexOf(value) >= 0) ||
            sortableItem[i].obj.value == value) {
            display = true;
            // name唯一,已匹配则不必循环之后数据
            break;
        }
    }
    return display;
}

export default {
    name: 'layoutRenders',
    components: {
        draggable,
    },
    data() {
        return {
            sub_item: [],
            formData: {},
        }
    },
    watch: {
        sub_item(val) {
            // console.log(val)
        }
    },
    render(h) {
        var $this = this;
        // 获取当前控件渲染
        const arr = (layout_item[this.ele.toLowerCase()] && layout_item[this.ele.toLowerCase()](this, h)) || [];
        // 拥有绑定的值，需回填到控件
        this.$set(this.obj, 'value', typeof this.value !== "undefined" ? this.value : this.obj.value);
        // 显示配置按钮并且控件允许被配置
        const item_icon = this.configIcon && this.obj.config ? ItemIcon(this, h) : [];
        // 设置该控件标记为显示
        this.$emit('changeVisibility', this.index, true);
        const item=new Array();
        const subItems=new Array();
        console.log($this.sub_item);
        if($this.sub_item.length>0){
            for(var sub=0;sub<$this.sub_item.length;sub++){
                let subItem=h('renders',{
                    props:{
                        index:sub,
                        ele:$this.sub_item[sub].ele,
                        obj:$this.sub_item[sub].obj,
                        formData:$this.formData,
                        sortableItem:$this.sub_item,
                        confiIcon:true,
                    }
                })
                subItems.push(subItem)
            }
        }
        let transitionItem=h('transition-group',{
            props: {
                type: 'transition',
                name: 'flip-list',
                tag:'div'
            },
        },subItems)
        item.push(transitionItem)
        console.log(item)
        if("grid"==this.ele.toLowerCase()){
            //栅格
            let rowItem=h('Row',{
                props: {
                    type: 'flex',
                    align: this.obj.props.align,
                    justify:this.obj.props.justify,
                    gutter:this.obj.props.gutter
                },
            })
            item.push(rowItem)
            //判断栅格总和是否大于24,大于24按比例分配
            let totalSpan=0;
            this.obj.grids.forEach(item=>{
                totalSpan+=parseInt(item.span)
            });
            for(var i=0;i<this.obj.grids.length;i++){
                item.push(h('Col', {
                    props: {
                        span:totalSpan>24?Math.round(this.obj.grids[i].span*24/totalSpan):this.obj.grids[i].span
                    },
                    style: {
                        borderStyle: "double double double double"
                    },
                }, [
                    h('span', totalSpan>24?Math.round(this.obj.grids[i].span*24/totalSpan):this.obj.grids[i].span)
                ]));
            }
            item.push(item_icon);
            return h('draggable',{
                    props: {
                        list:$this.sub_item,
                        options:{
                            animation: 0,
                            ghostClass: "ghost",
                            // 分组
                            group: {
                                name: "shared",
                                pull: "clone",
                                revertClone: false
                            },
                            // 禁止拖动排序
                            sort: false
                        }
                    }
                },item
            )
        }else if("divider"===this.ele.toLowerCase()){
            item.push(this.obj.label);
            item.push(item_icon);
            return h('Divider',{
                props: {
                    orientation:this.obj.props.orientation
                },
            },item);
        }
    },
    props: {
        //是否可编辑
        disabled:{
            type:Boolean,
            default:false
        },
        // 当前控件的类型
        ele: {
            type: String,
            default: "input"
        },
        // 当前控件的配置
        obj: {
            type: Object,
            default () {
                return {};
            }
        },
        // 当前控件的index,config 和 delete 会用到
        index: {
            type: Number,
            default: 0
        },
        // 整个表单的数据
        data: {
            type: Object,
            default () {
                return {}
            }
        },
        // 是否显示配置按钮
        configIcon: {
            type: Boolean,
            default: false
        },
        // 当前控件绑定的值 方便数据回填
        value: [String, Number, Array],
        // 当前被clone控件列表
        sortableItem: {
            type: Array,
            default () {
                return [];
            }
        }
    }
}